<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>杨澎锴的实践作业-21-D3四要素</title>
    <!-- 使用d3js专注于内容的创作 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
    <style>
      #box {
        height: 200px;
        width: 200px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <!-- D3选择器就是css的选择器，两者之间有一定的互通 -->
    <!-- 一学代码深似海，不断阅读原文档 -->
    <h1>D3选择器</h1>
    <p>就要掷地有声的炸裂</p>
    <div id="box" class="col-md" title="this-a-goodnews"></div>
    <div></div>
    <!-- 成为数据真正的拥有者，而不是数据的使用者，不被数据的算法所歧视 -->
    <script>
      // var divs = d3.select("p");
      // console.log(divs);

      // 后面覆盖了前面
      console.log(
        d3
          .select("#box")
          .attr("title", "阅读文献之后的改变")
          // 改变了颜色真神奇
          .style("background-color", "red")
      );
      // 获得初始元素，返回数组
      console.log(d3.selectAll("div").nodes());
      // js使用反复的提取和使用
      d3.select("body")
        .style("margin", "10px auto")
        .selectAll("div")
        .style("background-color", "#bbb");
      // .html(document.body.innerHTML);
    </script>
  </body>
</html>
